<template>
  <van-form validate-first @submit="onSubmit">
    <p class="title">寄件人信息</p>
    <div class="panel">
      <van-field
        label-width="7rem"
        clearable
        label="姓名"
        v-model="sender.name"
        :readonly="!isAdmin"
        placeholder="寄件人姓名"
        :rules="[
          { required: true, message: '请填写寄件人姓名' },
          { validator: usernameCheck, message: '该客户不存在' }
        ]"
      />
      <van-field
        clearable
        label-width="7rem"
        label="电话"
        v-model="sender.phone"
        placeholder="寄件人手机号"
        :rules="[
          { required: true, message: '请填写寄件人手机号' },
          { validator: checkPhone, message: '请输入正确手机号' }
        ]"
        :readonly="isDetail"
      />
      <van-field
        label-width="7rem"
        readonly
        v-if="!isDetail"
        clickable
        name="area"
        :value="sender.area"
        label="地区"
        placeholder="选择省 / 市 / 区"
        @click="showAreaList(sender)"
        :rules="[{ required: true, message: '请填写寄件人地区' }]"
      />
      <van-field
        clearable
        autosize
        label-width="7rem"
        label="详细地址"
        v-model="sender.location"
        placeholder="街道门牌、楼层房间号等信息"
        type="textarea"
        :rules="[{ required: true, message: '请填写寄件人详细地址' }]"
        :readonly="isDetail"
      />
    </div>
    <div
      class="exchange"
      @click="exchange"
      v-if="!isDetail"
    >
      <van-icon name="exchange" class="icon" ></van-icon>
    </div>
    <p class="title">收件人信息</p>
    <div class="panel">
      <van-field
        clearable
        label-width="7rem"
        label="姓名"
        v-model="receiver.name"
        placeholder="收件人姓名"
        :rules="[
          { required: true, message: '请填写收件人姓名' },
          { validator: usernameCheck, message: '该客户不存在' }
        ]"
        :readonly="isDetail"
      />
      <van-field
        clearable
        label-width="7rem"
        label="电话"
        v-model="receiver.phone"
        placeholder="收件人手机号"
        :rules="[
          { required: true, message: '请填写收件人手机号' },
          { validator: checkPhone, message: '请输入正确手机号' }
        ]"
        :readonly="isDetail"
      />
      <van-field
        label-width="7rem"
        readonly
        v-if="!isDetail"
        clickable
        name="area"
        :value="receiver.area"
        label="地区"
        placeholder="选择省 / 市 / 区"
        @click="showAreaList(receiver)"
        :rules="[{ required: true, message: '请填写收件人地区' }]"
      />
      <van-field
        clearable
        autosize
        label-width="7rem"
        label="详细地址"
        v-model="receiver.location"
        placeholder="街道门牌、楼层房间号等信息"
        type="textarea"
        :rules="[{ required: true, message: '请填写收件人详细地址' }]"
        :readonly="isDetail"
      />
    </div>
    <div class="button" v-if="!isDetail">
      <van-button
        round block
        type="info"
        native-type="submit"
      >
      提交
      </van-button>
    </div>
    <van-popup v-model="showArea" position="bottom" get-container="#app">
      <van-area
        :area-list="areaList"
        @confirm="areaCf"
        @cancel="showArea = false"
      />
    </van-popup>
  </van-form>
</template>

<script>
import Person from 'classes/person'
import areaList from 'common/js/area'
import { nameCheck } from 'service/user'
import { __getUser } from 'common/js/user'
export default {
  name: 'order-form',
  data () {
    return {
      areaList,
      showArea: false,
      target: {},
      ownerName: '',
      user: __getUser()
    }
  },
  props: {
    sender: {
      type: Person,
      default: () => new Person()
    },
    receiver: {
      type: Person,
      default: () => new Person()
    },
    isDetail: {
      type: Boolean,
      default: false
    }
  },
  activated () {
    this.isAdmin || (this.sender.name = this.user.username)
  },
  computed: {
    isAdmin () {
      return this.user.state === 3
    }
  },
  methods: {
    areaCf (values) {
      this.target.area = values.map((item) => item.name).join('/')
      this.target = {}
      this.showArea = false
    },
    showAreaList (target) {
      this.target = target
      this.showArea = true
    },
    exchange () {
      let keep = ''
      Object.keys(this.sender).forEach(key => {
        if (key === 'name' && !this.isAdmin) return
        keep = this.sender[key]
        this.sender[key] = this.receiver[key]
        this.receiver[key] = keep
      })
    },
    onSubmit () {
      this.setAddress(this.sender, this.receiver)
      this.$emit('submit', this.sender, this.receiver)
    },
    setAddress (...args) {
      args.forEach(item => {
        !item.address && (item.address = item.area + ' ' + item.location)
      })
    },
    checkPhone (phone) {
      return /^[0-9]*[1-9][0-9]*$/.test(phone)
    },
    usernameCheck (name) {
      return new Promise((resolve) => {
        nameCheck(name).then(() => {
          resolve(false)
        }).catch((data) => {
          data.state === 1
            ? resolve(true) : resolve(false)
        })
      })
    }
  },
  watch: {
    user: {
      handler: function (newUser) {
        this.sender.name = newUser.username
      },
      deep: true
    }
  }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~stylus/method"
  @import "~stylus/variable"
  .title
    height: 3rem
    line-height: 3rem
    padding-left: 1.5rem
    align-items: center
    font-weight: bold
    font-size: 1.7rem
  .panel
    panel()
    padding: .5rem
  .exchange
    margin-top: 1.5rem
    width: 100%
    text-align: center
    .icon
      font-size: 4rem
      color: $color-gray
      transform: rotate(90deg)
  .button
    padding: 4rem 2rem 2rem
</style>
